<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link rel="stylesheet" type="text/css" href="/node_modules/bootstrap/dist/css/bootstrap.min.css">
  <script src="/node_modules/jquery/dist/jquery.min.js"></script>
  <script src="/node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
  <link rel="stylesheet" type="text/css" href="/node_modules/mditor/dist/css/mditor.min.css">
  <script src="/node_modules/mditor/dist/js/mditor.min.js"></script>
</head>
<body>
  <div class="container-fluid">
    <h1>发表文章页</h1>
    <hr>

    <form id="form">
      <!-- <input type="hidden" name="authorId" id="authorId" value="<%= user.id %>"> -->
      <div class="form-group">
        <label for="">文章标题：</label>
        <input type="text" name="title" id="title" class="form-control" required maxlength="30">
      </div>

      <div class="form-group">
        <label for="">文章内容：</label>
        <!-- 添加 textarea 元素 -->
        <textarea name="content" id="editor" class="form-control"></textarea>
      </div>

      <div class="form-group clearfix">
        <input type="submit" value="发表文章" class="btn btn-primary pull-right">
      </div>
    </form>
  </div>
  <script>
    $(function() {
      let mditor =  Mditor.fromTextarea(document.getElementById('editor'));
      // mditor使用示例
      // mditor.on('ready',function(){
        // console.log(mditor.value);
        // mditor.value = '** hello **';	
      // });
      // 5.2 页面中发送post请求
      $('#form').on('submit', function(e) {
        e.preventDefault()
        $.ajax({
          type: "POST",
          url: "/article/post",
          data: {
            title: $('#title').val(),
            // mditor.value是获取富文本编辑器中输入的值用的
            content: mditor.value,
            userId: '<%= user.id%>'
          },
          dataType: "json",
          success: function (res) {
            // 如果成功，跳转到文章详情页/article/detail?id = xxx
            if (res.status === 1) {
              location.href=`/article/detail?id=${res.articleId}`
            } else {
              alert(res.msg)
            }
          }
        });
      })
    })
  </script>
</body>
</html>